<template>
	<div class="cinema_body">
    <Loading v-if="isLoading" />
    <Scroll v-else :pulldown="true" @pulldown="getCinemaList">
      <ul>
        <!-- <li>
          <div>
            <span>大地影院(澳东世纪店)</span>
            <span class="q">
              <span class="price">22.9</span> 元起
            </span>
          </div>
          <div class="address">
            <span>金州区大连经济技术开发区澳东世纪3层</span>
            <span>1763.5km</span>
          </div>
          <div class="card">
            <div>小吃</div>
            <div>折扣卡</div>
          </div>
        </li> -->
        <li v-for="item in cinemaList" :key="item.id">
          <div>
            <span>{{ item.nm }}</span>
            <span class="q">
              <span class="price">{{ item.sellPrice }}</span> 元起
            </span>
          </div>
          <div class="address">
            <span>{{ item.addr }}</span>
            <span>{{ item.distance }}</span>
          </div>
          <div class="card">
            <div v-for="(value,name) in item.tag" v-if="value===1" :key="name" :class="name | classCard">{{ name | formatCard }}</div>
          </div>
        </li>
      </ul>
    </Scroll>
	</div>
</template>

<script>
import { getCinemaList } from '@/api/api'

export default {
  name: 'cilist',
  data() {
    return {
      cinemaList: [],
      isLoading: true,
      prevCityId: -1
    }
  },
  activated() {
    let cityId = this.$store.state.city.id
    if(this.prevCityId === cityId) return
    this.getCinemaList()
  },
  methods: {
    getCinemaList() {
      this.isLoading = true
      let cityId = this.$store.state.city.id
      getCinemaList(null, { cityId }).then( res => {
        let resData = res.data
        this.isLoading = false
				if (resData.msg === 'ok') {
          this.cinemaList = resData.data.cinemas
          this.prevCityId = cityId
        }
      })
    }
  },
  filters: {
    formatCard(name) {
      let card = [
        { key: 'allowRefund', value: '改签' },
        { key: 'endorse', value: '退' },
        { key: 'sell', value: '折扣卡' },
        { key: 'snack', value: '小吃' }
      ]
      for(let i = 0; i < card.length; i++) {
        if(card[i].key === name) {
          return card[i].value
        }
      }
      return ''
    },
    classCard(name) {
      let card = [
        { key: 'allowRefund', value: 'or' },
        { key: 'endorse', value: 'or' },
        { key: 'sell', value: 'bl' },
        { key: 'snack', value: 'bl' }
      ]
      for(let i = 0; i < card.length; i++) {
        if(card[i].key === name) {
          return card[i].value
        }
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
